<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语音听写</title>
    <style>
        .container{
        width:48%;float:left

        }

     @media (max-width:500px){
           .container{
        width:100%;float:left

        }
     }
     .buttons1{
     margin-right:10%;margin-top:20px;font-size: 20px;padding: 6px 10px;cursor: pointer;background-color: white;color: blue;
        border: 1px solid #555555;border-radius: 5px;float:left;}
     .buttons2{
     margin-right:10%;margin-top:20px;font-size: 20px;padding: 6px 10px;cursor: pointer;background-color: white;color: blue;
        border: 1px solid #555555;border-radius: 5px;float:right;}


    </style>
</head>

<body>

<header>
    <div>
        <h1 style="text-align:center">
            关键字提取能力演示
        </h1>
    </div>
</header>
<br/>
<br/>
<br/>

<div class="container">

    <!--上传文件-->
    <form id="upload">
        <h2>请输入需要评测的文本</h2>
        <textarea name="TEXT" id="featureInfo" placeholder="内容不能为空"
                  style="font-size: 16px;min-height:80px;min-width:200px;width:90%"
                  required id="featureInfo" ></textarea>

        <input type="submit" value="开始提取" onclick="uploadPic()" class="buttons2" >
        <span class="showUrl"></span>
        <img src="" class="showPic" alt="">
    </form>
    <div style="clear:both;"></div>

</div>


    <div style="width: 48%; float: left">
      <h2>评测结果</h2>
      <div id="resdiv" style="border: 1px solid #ddd; min-height: 300px; padding: 8px"></div>
      <div style="clear: both"></div>
    </div>

    <script src="./jquery.min.js"></script>
    <!--上传文件的JavaScript-->
    <script type="text/javascript">
      function uploadPic() {
        // 先停止表单的默认提交事件
        event.preventDefault();

        $("#resdiv").text("正在识别...");
        var form = document.getElementById("upload"),
          formData = new FormData(form);
        formData.append("TEXT", $("#featureInfo").val());
        console.log(formData)
        $.ajax({
          url: "http://localhost:8080/tiqu/qbh",
          type: "post",
          dataType: "json",
          data: formData,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res.code);
            if (res.code !=0) {
              $("#resdiv").text("识别出错"+res.desc);
            } else {
              var msg=
              '<h3 style="font-size: 20px">获取对应的如下:</h3>'
              for (var i = 0; i < res.data.ke.length; i++) {
                msg += "<tr>" +res.data.ke[i].score+ "<td>" + (i + 1) + "</td>" +res.data.ke[i].word+ "<td>" + "<br>";
              }
              msg += "</table>"
              $("#resdiv").html(msg);
            }
            console.log(res);
          },
          error: function (xhr, err) {
            alert("网络连接失败,稍后重试", err);
          },
        });
      }
    </script>
  </body>
</html>
